<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="<%=HTTP_ROOT%>/css/bootstrap.css">
    <style media="screen">
    .my-panel {width:80%; position:absolute; z-index:100; left:50%; top:100px; margin-left:-40%; display:none;}
    .my-panel-shadow {width:100%; height:100%; position:fixed; left:0; top:0; background:#000; opacity:0.6; z-index:99; display:none;}

    .my-dialog {width:300px; position:absolute; z-index:100; left:50%; top:200px; margin-left:-150px; display:none;}
    .my-dialog-shadow {width:100%; height:100%; position:fixed; left:0; top:0; background:#000; opacity:0.3; z-index:99; display:none;}
    </style>
  </head>
  <body>
    <ul class="nav nav-tabs">
      <%for(let type in page_types){%>
      <li role="presentation" <%if(type==page_types){%>class="active"<%}%>>
        <a href="<%=HTTP_ROOT%>/admin/<%=type%>"><%=page_types[type]%></a>
      </li>
      <%}%>
    </ul>
    <!--表格-->
    <a href="#" class="btn btn-primary glyphicon glyphicon-plus" id="btn_add">添加</a>
    <table class="table">
      <thead>
        <tr>
          <th>ID</th>
          <% fields.forEach(field=>{%>
            <%if(field.type != 'textarea'){%>
              <th><%=field.title%></th>
            <%}%>
          <%})%>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <% datas.forEach(data=>{ %>
        <tr>
          <td width='50'><%=data.ID%></td>

          <%fields.forEach(field=>{%>
            <%if(field.type != 'textarea'){%>
              <td><%=data[field.name]%></td>
            <%}%>
          <%})%>

          <td width='250'>
            <a
              href="<%=HTTP_ROOT%>/admin/<%=page_type%>/delete/<%=data.ID%>"
              class="btn btn-danger glyphicon glyphicon-trash"
              onclick="return confirm('你是否真的确认要删除')"
            >删除</a>

            <a
              href="#" data-id="<%=data.ID%>"
              class="btn btn-default glyphicon glyphicon-pencil btn-modify"
            >修改</a>
          </td>
        </tr>
        <% }) %>
      </tbody>
    </table>

    <!--添加-->
    <div class="my-panel-shadow"></div>
    <div class="panel panel-default my-panel">
      <div class="panel-heading">
        <div class="panel-title">
          添加
        </div>
      </div>
      <div class="panel-body">
        <form class="form form-horizontal" action="<%=HTTP_ROOT%>/admin/<%=page_type%>" method="post" enctype="multipart/form-data">

          <%fields.forEach(field=>{%>
            <div class="form-group">
              <label class="col-sm-2 control-label"><%=field.title%></label>
              <div class="col-sm-10">
                <%if(field.type == 'textarea'){%>
                  <textarea name="<%=field.name%>" class="form-control"cols="80" rows="20" placeholder="<%=field.title%>"></textarea>
                <%}else if(field.type == 'select'){%>
                  <select class="form-control" name="<%=field.name%>">
                    <%field.items.forEach(item=>{%>
                      <option value="<%=item.ID%>"><%=item.title%></option>
                    <%})%>
                  </select>
                <%}else{%>
                    <input type="<%=field.type%>" class="form-control" name="<%=field.name%>" placeholder="<%=field.title%>">
                <%}%>
              </div>
            </div>
          <%})%>

          <div class="form-group">
            <div class="col-sm-10 col-sm-offset-2">
              <button type="submit" class="btn-primary form-control">提交</button>
            </div>
          </div>
        </form>
      </div>
    </div>

    <!--对话框-->
    <div class="my-dialog-shadow"></div>
    <div class="panel panel-default my-dialog">
      <div class="panel-heading">
        <div class="panel-title">
          标题
        </div>
      </div>
      <div class="panel-body">
        内容
      </div>
      <div class="panel-footer">
        <div class="btn-group">
          <button type="button" class="btn btn-default btn-sm">按钮1</button>
          <button type="button" class="btn btn-default btn-sm">按钮2</button>
        </div>
      </div>
    </div>
  </body>
  <script src="<%=HTTP_ROOT%>/js/jquery.min.js" charset="utf-8"></script>
  <script>
  $('#btn_add').click(function (){
    $('.my-panel, .my-panel-shadow').show();
  });
  </script>
  <script>
    const HTTP_ROOT = '<%=HTTP_ROOT%>';
    const page_type = '<%=page_type%>';
  </script>
  <script>
    $('.btn-modify').click(async function(){
      let id = this.dataset.id;
      let url = `${HTTP_ROOT}/admin/${page_type}/get/${id}`;

      let data = await $.ajax({
        url,
        dataType:'json'
      })
      if(data.err){
        alert(data.msg);
      }else{
        let old_data = data.data;
        $('.my-panel').show();
        $('.my-panel-shadow').show();
        $('.my-panel .panel-title').html('修改');
        $('.my-panel form').attr('action',`${HTTP_ROOT}/admin/${page_type}/modify/${id}`);
        $('.my-panel input,.my-panel textarea,.my-panel select').each(function(){
        let old_data = data.data;
          if(old_data[this.name] !== undefined){
            try{
              if(this.type == 'date'){
                let oDate = new Date(old_data[this.name]*1000);
                if(oDate.getMonth()+1 < 10){
                  this.value=`${oDate.getFullYear()}-0${oDate.getMonth()+1}-${oDate.getDate()}`
                }else if(oDate.getDate() < 10){
                  this.value=`${oDate.getFullYear()}-${oDate.getMonth()+1}-0${oDate.getDate()}`
                }else{
                  this.value=`${oDate.getFullYear()}-${oDate.getMonth()+1}-${oDate.getDate()}`
                }
              }else{
                this.value = old_data[this.name];
              }
            }catch(e){}
          }
        })
      }
    })
  </script>
</html>
